<template>
  <div class="admin-dashboard">
    <h1>控制面板</h1>
    
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-icon user-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-title">用户总数</div>
            <div class="stat-value">{{ stats.userCount }}</div>
            <div class="stat-desc">较上月 <span class="up">+5.2%</span></div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-icon attraction-icon">
            <el-icon><Place /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-title">景点总数</div>
            <div class="stat-value">{{ stats.attractionCount }}</div>
            <div class="stat-desc">较上月 <span class="up">+12.3%</span></div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-icon comment-icon">
            <el-icon><ChatDotRound /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-title">评论总数</div>
            <div class="stat-value">{{ stats.commentCount }}</div>
            <div class="stat-desc">较上月 <span class="up">+8.7%</span></div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="stat-card">
          <div class="stat-icon visit-icon">
            <el-icon><View /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-title">访问量</div>
            <div class="stat-value">{{ stats.visitCount }}</div>
            <div class="stat-desc">较上月 <span class="up">+15.6%</span></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :lg="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>访问量趋势</span>
              <el-radio-group v-model="visitPeriod" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里可以集成ECharts等图表库 -->
            <div class="placeholder-chart">访问量趋势图表</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :lg="8">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户分布</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里可以集成ECharts等图表库 -->
            <div class="placeholder-chart">用户分布图表</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :xs="24" :md="12">
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span>最新用户</span>
              <el-button type="text" @click="goToUserManagement">查看全部</el-button>
            </div>
          </template>
          <el-table :data="latestUsers" style="width: 100%">
            <el-table-column prop="username" label="用户名" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="createdAt" label="注册时间" />
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :md="12">
        <el-card class="table-card">
          <template #header>
            <div class="card-header">
              <span>最新评论</span>
              <el-button type="text" @click="goToCommentManagement">查看全部</el-button>
            </div>
          </template>
          <el-table :data="latestComments" style="width: 100%">
            <el-table-column prop="username" label="用户" />
            <el-table-column prop="content" label="评论内容" :show-overflow-tooltip="true" />
            <el-table-column prop="createdAt" label="评论时间" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { User, Place, ChatDotRound, View } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
// 导入API函数
// import { getDashboardStats, getLatestUsers, getLatestComments } from '@/api/admin';

const router = useRouter();
const visitPeriod = ref('month');

// 统计数据
const stats = ref({
  userCount: 0,
  attractionCount: 0,
  commentCount: 0,
  visitCount: 0
});

// 最新用户
const latestUsers = ref([]);

// 最新评论
const latestComments = ref([]);

// 获取控制面板数据
const fetchDashboardData = async () => {
  try {
    // 实际项目中应该调用API获取数据
    // const response = await getDashboardStats();
    // if (response.code === 200) {
    //   stats.value = response.data;
    // }
    
    // 模拟数据
    stats.value = {
      userCount: 1258,
      attractionCount: 356,
      commentCount: 4721,
      visitCount: 28563
    };
    
    latestUsers.value = [
      { username: 'user1', email: 'user1@example.com', createdAt: '2023-09-15 10:23:45' },
      { username: 'user2', email: 'user2@example.com', createdAt: '2023-09-14 15:42:18' },
      { username: 'user3', email: 'user3@example.com', createdAt: '2023-09-13 09:11:32' },
      { username: 'user4', email: 'user4@example.com', createdAt: '2023-09-12 16:37:54' },
      { username: 'user5', email: 'user5@example.com', createdAt: '2023-09-11 14:25:09' }
    ];
    
    latestComments.value = [
      { username: 'user1', content: '这个景点真的很美，值得一去！', createdAt: '2023-09-15 11:23:45' },
      { username: 'user2', content: '交通不是很方便，但景色很棒。', createdAt: '2023-09-14 16:42:18' },
      { username: 'user3', content: '门票有点贵，但里面的设施很完善。', createdAt: '2023-09-13 10:11:32' },
      { username: 'user4', content: '周末人太多了，建议工作日去。', createdAt: '2023-09-12 17:37:54' },
      { username: 'user5', content: '非常适合带孩子去，有很多互动项目。', createdAt: '2023-09-11 15:25:09' }
    ];
  } catch (error) {
    console.error('获取控制面板数据失败:', error);
    ElMessage.error('获取控制面板数据失败');
  }
};

// 跳转到用户管理页面
const goToUserManagement = () => {
  router.push('/admin/users');
};

// 跳转到评论管理页面
const goToCommentManagement = () => {
  router.push('/admin/comments');
};

onMounted(() => {
  fetchDashboardData();
});
</script>

<style scoped>
.admin-dashboard {
  padding: 20px;
}

h1 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
  color: #303133;
}

.stat-card {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  padding: 10px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon .el-icon {
  font-size: 30px;
  color: white;
}

.user-icon {
  background-color: #409EFF;
}

.attraction-icon {
  background-color: #67C23A;
}

.comment-icon {
  background-color: #E6A23C;
}

.visit-icon {
  background-color: #F56C6C;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin: 5px 0;
}

.stat-desc {
  font-size: 12px;
  color: #909399;
}

.up {
  color: #67C23A;
}

.down {
  color: #F56C6C;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card, .table-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-chart {
  color: #909399;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 768px) {
  .stat-card {
    margin-bottom: 15px;
  }
  
  .chart-container {
    height: 200px;
  }
}
</style> 